import { AfterViewInit, Component,  OnDestroy, OnInit,  } from '@angular/core';

@Component({
  selector: 'app-chart-load-rate',
  templateUrl: './chart-load-rate.component.html',
  styleUrls: ['./chart-load-rate.component.css']
})
export class ChartLoadRateComponent implements OnInit{
  public chartOptions
  public data:object[];
  // @ViewChild('chart') public chartEl: ElementRef;  //highcharts
  public _chart: any; //highcharts
  //highcharts
  public fillChart(data:any[]){

    let opts: any = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'bar',
        backgroundColor: 'transparent',
        renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: '',
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br/>',
        shared:true
      },
      plotOptions: {
        series: {
          stacking: 'percent',
        }
      },
      xAxis: {
        title: {
          text: ''
        },
        categories:[''],
        labels: {
          enabled: false
        },
        tickWidth: 0,
        visible:false
      },
      yAxis: {
        title: {
          text: ''
        },
        categories:[''],
        labels: {
          enabled: false
        },
        tickWidth: 0,
        gridLineWidth: 0
      },
      series: data
    }
    this.chartOptions = opts
  }
  ngOnInit() {
    this.data=[
      { name: '其他占比率', data: [{y:1,color:'#e8e8e8'}]},
      { name: '负荷率', data: [{y:2,color:'#41bf39'}]},
    ];
    this.fillChart(this.data);
  }

}
